<template>
  <div class="cresubject">
    <section>
      <h3>选择类型</h3>
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
          <div @click="oneAcdClick">
            <el-card :body-style="bodystyle" :class="{ actived : showAcd === 1}" class="box-card">
              <div slot="header" style="text-align:center">
                <svg-icon class-name="pen" icon-class="pen"/>
                <h4>普通课程</h4>
              </div>
              <div style="font-size:14px; text-align:center">支持视频、图文、PPT等各种形式，支持作业、笔记等多个学习工具的过程</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div @click="twoAcdClick">
            <el-card :body-style="bodystyle" :class="{ actived : showAcd === 2}" class="box-card">
              <div slot="header" style="text-align:center">
                <svg-icon class-name="eye-open" icon-class="eye-open"/>
                <h4>直播</h4>
              </div>
              <div style="font-size:14px; text-align:center">以直播为教学形式的，支持多个学习工具的课程</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div @click="threeAcdClick">
            <el-card :body-style="bodystyle" :class="{ actived : showAcd === 3}" class="box-card">
              <div slot="header" style="text-align:center">
                <svg-icon class-name="play" icon-class="play"/>
                <h4>录播公开课</h4>
              </div>
              <div style="font-size:14px; text-align:center">免费、无门槛观看的视频课程，主要用于营销推广</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div @click="fourAcdClick">
            <el-card :body-style="bodystyle" :class="{ actived : showAcd === 4}" class="box-card">
              <div slot="header" style="text-align:center">
                <svg-icon class-name="video" icon-class="video"/>
                <h4>直播公开课</h4>
              </div>
              <div style="font-size:14px; text-align:center">免费、无门槛参与的直播课程，主要用于营销推广</div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="4">
          <div @click="fiveAcdClick">
            <el-card :body-style="bodystyle" :class="{ actived : showAcd === 5}" class="box-card">
              <div slot="header" style="text-align:center">
                <svg-icon class-name="orderclass" icon-class="orderclass"/>
                <h4>预约课程</h4>
              </div>
              <div style="font-size:14px; text-align:center">支持约排课，自由直播教学</div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between" style="margin-top:50px;">
        <el-col :span="2">
          <p style="line-height:5px;text-indent:15px;">课程标题</p>
        </el-col>
        <el-col :span="22">
          <el-input v-model="courseTitle"/>
        </el-col>
      </el-row>
      <div class="subfooter">
        <el-row type="fles" justify="center" class="submmit-wrap">
          <el-col :span="12">
            <a href="">如何创建课程？</a>
          </el-col>
          <el-col :span="7">
            <el-button
              :loading="wait"
              type="primary"
              @click="handleCreate"
            >创建
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              @click="cancelCreate"
            >取消
            </el-button>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showAcd: 1,
        courseTitle: '',
        bodystyle: {
          padding: '30px 0 10px 0',
          textalign: 'center',
          border: {
            radius: '0'
          }
        },
        wait: false
      }
    },
    methods: {
      handleCreate() {
        if (this.courseTitle) {
          // this.$router.push('/subject/submanage')
          let params = {
            title: this.courseTitle
          };
          this.$router.push({
            path: '/subject/submanage',
            query: params
          })
        }
      },
      oneAcdClick() {
        this.showAcd = 1
      },
      twoAcdClick() {
        this.showAcd = 2
      },
      threeAcdClick() {
        this.showAcd = 3
      },
      fourAcdClick() {
        this.showAcd = 4
      },
      fiveAcdClick() {
        this.showAcd = 5
      },
      cancelCreate() {
        this.$router.push({
          path: '/subject/course',
        })
      },
    }
  }
</script>

<style lang="scss">
  .actived {
    background-color: #43bc60 !important;
    color: #fff !important;
    fill: #fff !important;
  }

  .cresubject {
    width: 100%;
    height: 1000px;
    background: #eff1f5;
    padding: 50px;
    position: relative;
    display: inline-block;

    section {
      width: 100%;
      height: 600px;
      position: absolute;
      right: 0px;
      margin-left: -680px;
      background: #fff;
      padding: 20px 30px 30px 30px;
      box-sizing: border-box;
      display: block;

      h3 {
        width: 100%;
        border-bottom: 2px solid #e3e3e3;
        font-weight: 100;
        padding: 10px 0;
      }

      .box-card {
        padding: 10px 10px 10px 10px;
        box-sizing: border-box;
        border-radius: 15px;
        height: 268px;
        background-color: #f4f6f8;
        cursor: pointer;

        .pen,
        .eye-open,
        .video,
        .orderclass,
        .play {
          width: 47px;
          height: 47px;
        }
      }

      .subfooter {
        width: 100%;
        height: 50px;
        position: relative;
        margin-top: 40px;
        line-height: 50px;

        .submmit-wrap {
          width: 300px;
          height: 20px;
          position: absolute;
          left: 50%;
          margin-left: -150px;
          color: #919191;
        }
      }
    }
  }
</style>
